// 角色权限 - 列表
import React from 'react';
import { observer, useLocalStore } from 'mobx-react-lite';
import { Link } from 'react-router-dom';
import { Card, Form, Row, Col, Button, Input, Table, Modal, message } from 'antd';
import {
  SearchOutlined,
  PlusOutlined,
} from '@ant-design/icons';
import * as listApi from '~/apis/permission/listApi';
import { getColumns } from './pageConfig';
import './index.local.sass';

const cardConfig = {
  size: 'small' as const,
  bordered: false,
};

const FormItem = Form.Item;
const { confirm } = Modal;

const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
};

const showTotal = (total: number) => `Total: ${total}`;

const PermissionList = observer(() => {
  const state = useLocalStore(() => ({
    loading: false,
    tableList: {
      data: [],
      pageNo: 1,
      pageSize: 10,
      totalCount: 0,
      totalPage: 0,
    },
    getData: {},
  }));

  const [form] = Form.useForm();

  const doQuery = (curPage: number = 1) => {
    state.tableList.pageNo = curPage;

    const { pageNo, pageSize } = state.tableList;

    const params = {
      pageNum: pageNo,
      pageSize,
      ...state.getData,
    };

    state.loading = true;

    listApi.getList(params).then((res) => {
      state.tableList = {
        ...state.tableList,
        data: res.data,
        totalCount: res.pageInfo.total,
        totalPage: res.pageInfo.totalPages,
      };
    }).finally(() => {
      state.loading = false;
    });
  };

  const onSearch = (values: any) => {
    state.getData = values;

    doQuery(1);
  };

  const onReset = () => {
    form.resetFields();

    onSearch({});
  };

  // 删除
  const deleteItem = (id: number | string) => {
    confirm({
      title: 'Do you want to delete this role?',
      onOk() {
        listApi.deleteItem({ roleId: id }).then(() => {
          message.success('delete success');
          doQuery(1);
        });
      },
    });
  };

  const columns = getColumns({ deleteItem });

  const { loading, tableList: {
    pageNo, totalCount, pageSize, data,
  } } = state;

  const tableOption: any = {
    loading,
    columns,
    pagination: {
      current: pageNo,
      total: totalCount,
      pageSize,
      size: 'small',
      showQuickJumper: true,
      showTotal,
      onChange: (curPage: number) => {
        doQuery(curPage);
      },
    },
    dataSource: data || [],
    rowKey: 'id',
    size: 'small',
  };

  React.useEffect(() => {
    doQuery(1);
  }, []);

  return (
    <div>
      <Card {...cardConfig} className="search-card">
        <Form form={form} onFinish={onSearch}>
          <Row>
            <Col span={6}>
              <FormItem
                name="name"
                {...formItemLayout}
              >
                <Input
                  allowClear={true}
                  prefix={
                    <SearchOutlined className="text-gray-400" />
                  }
                />
              </FormItem>
            </Col>
            <Col span={12}>
              <FormItem {...formItemLayout}>
                <Button
                  type="primary"
                  className="mr-2"
                  htmlType="submit"
                >
                  Search
                </Button>

                <Button className="mr-2" onClick={onReset}>
                  Reset
                </Button>
              </FormItem>
            </Col>
          </Row>
        </Form>
      </Card>

      <Card {...cardConfig} className="card">
        <div className="mb-4">
          <Link to={'/permission/add'}>
            <Button
              className="mr-2"
              icon={
                <PlusOutlined/>
              }
            >
              Create Role
            </Button>
          </Link>
        </div>

        <Table
          {...tableOption}
        />
      </Card>
    </div>
  );
});

export default PermissionList;
